<script setup lang="ts">
import {reactive, ref,onMounted, watch} from 'vue'
import { getIndexHome,getTrendsIndex,getGoods,getCases,getNews,getCodeApi,joinUs } from '@/apis/home.js'
import { useRouter,useRoute } from "vue-router";
import { message } from 'ant-design-vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
const Router = useRouter();

const route = useRoute();

const modules = ref([Navigation]);

const scrollToHash = async () => {
  if (route.hash) {
    await nextTick(); // 等待 Vue DOM 更新

    // 动态获取当前页面的实际头部高度
    const header = document.querySelector('.header');
    const headerHeight = header?.offsetHeight || 0;

    setTimeout(() => { // 给异步内容预留加载时间
      const el = document.querySelector(route.hash);
      if (el) {
        const targetY = el.offsetTop - headerHeight;
        window.scrollTo({
          top: targetY,
          behavior: 'smooth'
        });
      }
    }, 300); // 根据实际接口响应时间调整
  }
};

// 监听路由变化和组件挂载
onMounted(scrollToHash);
watch(() => route.hash, scrollToHash);



interface HomeDataType  {
  videoUrl: string
  years: number, //深耕教育
  brand: number, //赋能品牌
  students: number //培养学生
}
  const isPlaying = ref(true)
  const videoRef = ref(null)
  const HomeData = reactive<HomeDataType>({
    videoUrl: '',
    years: 0,
    brand: 0,
    students: 0
  });

  const playVideo = () => {
    if(isPlaying.value){
      isPlaying.value = false;
      videoRef.value.play()
    } else {
      videoRef.value.pause();
      isPlaying.value = true;
    }
  }

getIndexHome().then(res => {
  Object.assign(HomeData, res.data);
})

const moreDetail = reactive({}) as any;
getTrendsIndex().then(res => {
  Object.assign(moreDetail, res.data);
})

const toPages = (path: Object) => {
  Router.push({
    name: path.name,
    query: path.params
  })
}

const moreProduct = reactive({}) as any;
getGoods().then(res => {
  Object.assign(moreProduct, res.data);
})

const moreCase = reactive({}) as  any;
getCases().then(res => {
  currentCover.value = res.data.rows[0].cover
  Object.assign(moreCase, res.data);
})


const moreNews = reactive({}) as  any;
getNews().then(res => {
  Object.assign(moreNews, res.data.slice(0,3));
})



function tofa(index){
  if(index == 0){
    toPages({
      name: 'huoban'
    })
  } else if(index == 1){
    toPages({
      name: 'chanpfb'
    })
  } else if(index == 2){
    toPages({
      name: 'fabu'
    })
  }
}


const phone = ref<string>('');
const name = ref<string>('')
const code = ref<number>()

// 是否正在倒计时
const isCountingDown = ref(false);
// 倒计时秒数
const countdown = ref(0);
const validatePhone = () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(phone.value);
};


const getCode = () => {
  console.log(phone.value.length)
  if (!validatePhone()) {
    message.error('请输入正确的手机号码');
    return;
  }
  // 开始倒计时
  isCountingDown.value = true;
  countdown.value = 300;

  setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
      isCountingDown.value = false;
    }
  }, 1000);
  getcodeApiaaa()


}

const getcodeApiaaa  = () => {
  getCodeApi({
    mobile: phone.value
  }).then(res => {
    if(res.code === 200){
      message.success(res.msg);
    } else {
      message.error(res.msg);
    }

  })
}

const lijizhixun = () => {

  if (validatePhone() && name.value && code.value) {
    joinUs({
      mobile: phone.value,
      name: name.value,
      code: code.value,
    }).then(res => {
      if(res.code === 200){
        message.success(res.msg);
      } else {
        message.error(res.msg);
      }

    })
  } else {
    message.error('请填写完整后再提交！');
  }
}

const currentCover = ref()
const rightcase = ref('')
const handleMouseEnter = (cover) => {
  currentCover.value = cover;
};
const mySwiper = reactive({ instance: null })
const onSwiper = (swiper) => {
  mySwiper.instance = swiper;
}

const clickOnprev = () => {
  mySwiper.instance.slidePrev();
}
const clickOnnext = () => {
  mySwiper.instance.slideNext();
}


</script>

<template>
<div class="home-1">
  <div class="container-1" id="jianjie">
    <div>
      <div class="left">
        <div style="width: 47px;height: 6px;background: #FFFFFF;margin-bottom: 19px"></div>
        <div style="margin-bottom: 13px">COMPANY</div>
        <div style="margin-bottom: 43px">SLOGAN</div>
        <div style="margin-bottom: 43px;font-weight: bold">诚信&nbsp;&nbsp;利他&nbsp;&nbsp;用心&nbsp;&nbsp;主动&nbsp;&nbsp;创新</div>
        <div class="moreDetail" @click="toPages({
          name: 'moreDetail'
        })" style="width: 141px;height: 42px;background: #1C3680;">
          更多详情
        </div>
      </div>
      <div class="right">
        <div style="display: flex;flex-direction: row;width: 100%;justify-content: flex-end">
          <div class="videosss" @click="playVideo">
            <video ref="videoRef" @ended="() => {
          isPlaying = true
        }" :src="HomeData.videoUrl"  ></video>
            <img class="iconsss" v-if="isPlaying" src="@imgs/play.png" alt="">
          </div>
        </div>
        <div style="margin-top: 107px;display: flex;flex-direction: row">
          <div style="margin-right: 80px">
            <div class="top">深耕教育</div>
            <div class="bottom">
              <div class="num">{{HomeData.years}}</div>
              <div class="sm">余年</div>
            </div>
          </div>
          <div style="margin-right: 80px">
            <div class="top" >赋能品牌</div>
            <div class="bottom">
              <div class="num">{{HomeData.brand}}</div>
              <div class="sm">+</div>
            </div>
          </div>
          <div >
            <div class="top">培养学生</div>
            <div class="bottom">
              <div class="num">{{HomeData.students}}</div>
              <div class="sm">W+</div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
  <div class="container-2" id="dongtai">
    <div style="margin-top: 40px;">
      <div class="top">
        <div class="leftText">
          <div class="bnae">公司动态</div>
          <div class="slogo">
            专注于解决校区增收与招生
          </div>
        </div>
        <div class="btnright">
          Company News
        </div>
      </div>
      <div class="boxs">
        <div v-for="(item,index) in moreDetail" class="box" @click="tofa(index)">
          <div class="coverbg">
            <img style="height: 100%;width: 100%;" :src="item.cover" alt="l">
          </div>
          <div class="des">
            <div class="text blod">{{item.title}}</div>
            <div class="sl">{{item.titleEn}}</div>
            <div class="intoss">
              点击进入
              <img src="@imgs/right.png" alt="sss" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-2 container-3" id="product">
    <div style="margin-top: 40px;">
      <div class="top" style="margin-bottom: 50px">
        <div class="leftText">
          <div class="bnae" style="color: #FFFFFF">公司产品</div>
        </div>
        <div class="btnright" style="width: 310px;background: transparent;border: 1px solid #fff;color: #fff;width: auto;padding-left: 10px;padding-right: 10px">
          Company Products
        </div>
      </div>

      <div class="productImg"  style="position: relative">
        <div class="prev" @click="clickOnprev">
          <img src="@/assets/imgs/leftsss.png" alt="">
        </div>
        <div class="next" @click="clickOnnext">
          <img src="@/assets/imgs/rightss.png" alt="">
        </div>
        <swiper
            Navigation
            :slides-per-view="4"
            :space-between="50"
            :modules="modules"
            style="width: 100%;"
            @swiper="onSwiper"
        >
          <swiper-slide v-for="(item,index) in moreProduct" :key="index" @click="toPages({
        name: 'chanp',
        params: {
          id: item.id
        }
        })"><img :src="item.cover" /></swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
  <div class="container-2" id="case" style="background: #F0F0F0">
    <div style="margin-top: 40px;">
      <div class="top" style="margin-bottom: 0px">
        <div class="leftText">
          <div class="bnae">精彩案例</div>
        </div>
        <div class="btnright" style="cursor: default" @click="toPages({
          name: 'morenews'
        })">
          Exciting cases
        </div>
      </div>
      <div class="casebox">
        <div class="left">
          <img class="bgssss" style="" :src="currentCover" alt="">
        </div>
        <div class="right">

          <div class="rightcase" ref="rightcase"  style="cursor: pointer" v-for="(item,index) in moreCase.rows" :key="index"    @click="toPages({
            name: 'case',
            params: {
              id: item.id
            }
          })">
            <div class="nams1"  @mouseenter="handleMouseEnter(item.cover)">
              <p class="sline sadaaaaa" style="font-weight: bold">
                {{item.title}}
              </p>
              <p style="margin-left: 10px">{{item.titleEn}}</p>
            </div>
            <div class="nsm2 mline" style="-webkit-line-clamp: 2;">
              {{item.introduce}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-2" id="about" style="background: #E1E1E1">
    <div style="margin-top: 40px;">
      <div class="top" style="margin-bottom: 0px">
        <div class="leftText">
          <div class="bnae">新闻中心</div>
        </div>
        <div class="btnright" style="">
          News Center
        </div>
      </div>
      <div class="divss">
        <div v-for="(item,index) in moreNews" class="divss1" :key="index" @click="toPages({
          name: 'news',
          params: {
            id: item.id
          }
        })">
          <div class="newsName">{{item.title}}</div>
          <div class="content mline">
           {{item.introduce}}
          </div>
          <div class="asdintoss" style="">
            <div class="intoss " style="">点击进入</div>
            <img style="" src="@imgs/right.png" alt="">
          </div>
          <img class="asdasd" :src="item.cover" style="">
        </div>
      </div>
    </div>
  </div>
  <div class="container-2" id="joinus" style="background: #F0F0F0">
    <div style="margin-top: 98px;">
      <div class="top asdassadsd" style="">
        <div class="leftText">
          <div class="bnae">加入我们</div>
        </div>
        <div class="btnright" >
          Join Us
        </div>
      </div>
      <div class="inputBox" style="">
        <div>
          <input class="input1" v-model="name" placeholder="*请输入您的姓名"  type="text">
        </div>
        <div>
          <input class="input1" v-model="phone"  placeholder="*请输入您的手机号"  type="string">
        </div>
        <div style="display: flex;flex-direction: row;align-items: center">
          <input class="input1 input2" v-model="code" placeholder="*请输入验证码"  type="number">
          <div :disabled="isCountingDown" class="qrcode1" @click="getCode">{{ countdown > 0? `${countdown}s 后重试` : '获取验证码' }}</div>
        </div>
        <div class="liji" @click="lijizhixun" style="cursor: pointer">立即咨询</div>
      </div>
    </div>
  </div>

</div>
</template>

<style scoped lang="scss">

.prev {
  position: absolute;
  left: -200px;
  width: 200px !important;
  height: 250px !important;
  top: 50%;
  transform: translate(-50%, -50%);
  img {
    width: 100%;
    height: 100%;
  }
}
.next {
  position: absolute;
  right: -400px;
  width: 200px !important;
  height: 250px !important;
  top: 50%;
  transform: translate(-50%, -50%);
  img {
    width: 100%;
    height: 100%;
  }
}
.sadaaaaa {
  width: 100%;
  &:hover {
  }
}
.liji {
  height: 84px;width: 226px;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 26px;
  color: #FFFFFF;background: red;border-radius: 10px
}
.inputBox {
  display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;
}
.input1 {
  height: 84px;width: 500px;padding: 18px;border-radius: 10px;background: transparent;box-sizing:border-box;border: 1px solid #6B6B6B;font-size: 25px;
}
.input2 {
  height: 84px;width: 300px;padding: 18px;border-radius: 10px;background: transparent;box-sizing:border-box;border: 1px solid #6B6B6B;font-size: 25px;
  border-right: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}
.qrcode1 {
  height: 83px;
  width: 200px;
  border-left: 0px;
  background: #D8D8D8;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 26px;
  color: #5C5C5C;
  border: 1px solid #6B6B6B;
  border-left: 0px;
}
.asdassadsd {
  margin-top: 48px;
}
.home-1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-1 {
  background-image: url("@imgs/home_bg.png");
  width: 100%;
  height: 1500px;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  background-size: 100vw 1500px;
  box-sizing: border-box;

  > div {
    width: $page-width;
    margin: 0 auto;
    padding-top: 221px;
    box-sizing: border-box;
    font-size: 68px;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 200px;
  }

  .moreDetail {
    font-size: 30px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .right {
    display: flex;
    flex-direction: column;

    .videosss {
      width: 916px;
      height: 540px;
      position: relative;
      video {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }
}

.bottom {
  display: flex;
  flex-direction: row;
  .num {
    font-size: 85px;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
  }
  .sm {
    font-size: 28px;
    color: #FFFFFF;
    display: flex;
    padding-top: 44px;
    margin-left: 15px;
  }
}

.iconsss {
  color: #DDDDDB;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100px;
  width: 100px;
}
.top {
  font-size: 33px;
}

.container-2 {
  width: 100%;
  background: #E1E1E1;
  box-sizing: border-box;
  padding-bottom: 107px;
  > div {
    width: $page-width;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  .top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 130px;
    .leftText {
      .bnae {
        font-size: 68px;
        color: #000000;
        font-weight: bold;
      }
      .slogo {
        margin-top: 25px;
        height: 58px;
        font-size: 58px;
        color: #000000;
      }
    }
    .btnright {
      height: 62px;
      padding: 7px 26px;
      background: #FFFFFF;
      color: #000000;
      font-size: 38px;
      border-radius: 30px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .boxs {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30px;
    .box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 630px;
      background: #FFFFFF;
      border-radius: 36px ;
      cursor: pointer;
      .coverbg {
        border-radius: 36px ;
        width: 100%;
        height: 440px;
      }
      .des {
        margin-top: 30px;
        border-radius: 30px;
        width: 100%;
        background: #FFFFFF;
        box-sizing: border-box;
        padding: 18px 23px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-bottom: 50px;
        .text {
          font-size: 40px;
          color: #000;
          margin-bottom: 10px;
          font-weight: bold;
        }
        .sl {
          font-size: 26px;
          color: #000000;
        }

      }
    }
  }
}
.blod {
  font-weight: bold;
}

.container-3 {
  width: 100%;
  background: #E1E1E1;
  box-sizing: border-box;
  background-image: url("@imgs/bg2.png") !important;
  background-size: 100% 100%;
}

.divss {
  margin-top: 70px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .divss1 {
    box-sizing: border-box;
    position: relative;
    padding: 50px;
    width: 500px;
    height: 600px;
    cursor: pointer;
    background: #FFFFFF;
    .newsName {
      width: 100%;
      font-size: 33px;
      color: #000000;
      margin-bottom: 36px;
    }
    .content {
      width: 100%;
      font-size: 28px;
      color: #000000;
      text-align: justify;
      font-style: normal;
    }
  }

}

.casebox {
  margin-top: 54px;
  width: 100%;
  display: flex;
  flex-direction: row;
  .right {
    width: 50%;
  }
  .rightcase {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
    &:hover {
      color: #C29E4A;
    }
  }
  .nams1 {
    display: flex;
    align-items: center;
    font-size: 43px;
    color: #000000;
    p {
      color: #000000;
      font-style: normal;
    }
  }
  .nsm2 {
    width: 707px;
    font-size: 25px;
    line-height: 30px;
    color: #000000;
    text-align: left;
    font-style: normal;
    margin-top: -25px;
  }
}
.nams1:hover {
  >p {
    color: #E7D5A9 !important;
  }
}
.productImg {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  div {
    cursor: pointer;
    width:  431px;
    height: 611px;
    border-radius: 10px;
    img {
      height: 100%;
      width: 100%;
      border-radius: 10px;
    }
  }
}


.bgssss {
  width: 807px;
  height: 703px;
  margin-right: 33px;border-radius: 20px;
}
.insad {
  height: 29px;font-size: 20px;color: #000000;margin-right: 14px;margin-top: 40px;
}

.intoss {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 62px;
  height: 29px;
  color: #000000;
  font-size: 29px;
  width: 100%;
  font-weight: bold;
  img {
    height: 50px;
    margin-left: 15px;
  }
}

.asdintoss {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 50%;
  display: flex;flex-direction: row;align-items: center;margin-top: 100px;
  > img {
    height: 50px;
    margin-left: 15px;
    margin-top: 60px;
  }
}

.asdasd {
  height: 128px;
  width: 128px;
  border-radius: 50%;
  position: absolute;
  right: -50px;
  bottom: -30px;
}


/* 全局样式 */
[id] {
  scroll-margin-top: 100px; /* 默认值，会被 JS 动态覆盖 */
}
</style>
